<!DOCTYPE html>
<html lang="en">
<head th:replace="_fragment::head(~{::title})">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <title>博客管理</title>
</head>
<body>
<!--    导航-->
    <nav  th:replace="_fragment::menu2(1)" class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
            <div class="ui inverted secondary menu">
                <h2 class="ui teal header item">后台管理</h2>
                <a href="#" class="active item"><i class=" home icon"></i>博客</a>
                <a href="#" class="item"><i class=" idea icon"></i>分类</a>
                <a href="#" class="item"><i class=" tags icon"></i>标签</a>
                <div class="right menu">
                    <div class="ui dropdown item">
                        <div class="text">
                            <img src="https://unsplash.it/100/100?image=1005" crossorigin="ui avatar image">
                            大鱼
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" class="item">发布</a>
                <a href="#" class="active teal item">列表</a>
            </div>

        </div>
    </div>
<!--中间内容-->
    <div class="m-padded-tb-large" style="max-width: 60em;margin: auto;">
        <div class="ui container">
            <form class="ui secondary segment form">
                <div class="inline fields">
                    <div class="field">
                        <input type="text" name="title" placeholder="标题">
                    </div>
                    <div class="field">
                        <div class="ui type selection dropdown">
                            <input type="hidden" name="type">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.getId()}" th:text="${type.getName()}">错误日志</div>
<!--                                <div class="item" data-value="2">开发者手册</div>-->
                            </div>
                        </div>
                        <button id="clear-btn" class="ui compact button">clear</button>
                    </div>
                    <div class="field">
                        <a href="javascript:blogssearch()" class="ui mini teal basic button"><i class="search icon"></i>搜索</a>
                    </div>
                </div>
            </form>
            <div id="blogs-container">
                <table th:fragment="blogsupdate" class="ui table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>标题</th>
                        <th>类型</th>
                        <th>更新时间</th>
                        <th>操作</th>
                        <th><a th:href="@{/toBlogsInput}" class="ui mini right basic teal button">新增</a></th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr th:each="blog,iterStat:${blogs.getList()}">
                        <td th:text="${iterStat.count}">1</td>
                        <td th:text="${blog.getTitle()}">大老师语录</td>
                        <td th:text="${blog.getType()}">认知升级</td>
                        <td th:text="${#dates.format(blog.getUpdateTime(),'yyyy-MM-dd')}">2022-10-02 9:45</td>
                        <td>
                            <a th:href="@{/editBlogs(id=${blog.getId()})}" class="ui mini basic teal button">编辑</a>
                            <a th:href="'javascript:deleteBlog('+${blog.getId()}+','+${blogs.getPageNum()}+')'" class="ui mini basic red button">删除</a>
                            <button class="ui mini basic secondary button" th:if="${blog.getPublished()==1}">未发布</button>
                        </td>
                    </tr>
                    </tbody>

                    <tfoot>
                    <tr>
                        <th colspan="6">
                            <div class="ui right floated mini pagination menu">
                                <a th:href="'javascript:page('+${blogs.getPageNum()-1}+')'" th:class="${blogs.getPageNum()==1 ? 'icon disabled item':'icon item'}" class="icon item">
                                    <i class="left chevron icon"></i>
                                </a>
                                <i th:each="num:${#numbers.sequence(1,blogs.getPages())}">
                                    <a th:href="'javascript:page('+${num}+')'" th:class="${num == blogs.getPageNum()?'active item':'item'}" class="active item">[[${num}]]</a>
                                </i>
                                <a th:href="'javascript:page('+${blogs.getPageNum()+1}+')'" th:class="${blogs.getPageNum()==blogs.getPages() ? 'icon disabled item':'icon item'}" class="icon item">
                                    <i class="right chevron icon"></i>
                                </a>
                            </div>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>

            <!--            删除-->
            <div class="ui delete tiny modal">
                <div class="content">
                    <p>确认删除？</p>
                </div>
                <div class="actions">
                    <div class="ui red cancel inverted button">
                        <i class="remove icon"></i>
                        No
                    </div>
                    <div class="ui green ok inverted button">
                        <i class="checkmark icon"></i>yes
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--底部footer-->
<footer th:replace="_fragment::footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/1.jpg" class="ui rounded image" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">故事</a>
                    <a href="#" class="item">故事</a>
                    <a href="#" class="item">故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Emile:748835228@qq.com</a>
                    <a href="#" class="item">QQ: 748835228</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <p>111111111111111111111111111111</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>

    </div>
</footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script th:inline="javascript">
    $('.ui.dropdown').dropdown({
        on:'hover'
    });

    $("#clear-btn")
        .on('click',function (){
            $('.ui.type.dropdown')
                .dropdown('clear');
        });

    function blogssearch (){
        let typeid ;
        if ($("[name='type']").val()>0){
            typeid = $("[name='type']").val();
        }else{
            typeid = 0;
        }
        $("#blogs-container").load("/blogsSearch",{
            "title":$("[name='title']").val(),
            "typeid":typeid,
            "num":1,
        });
    };

    function page(pageNum){
        let typeid ;
        if ($("[name='type']").val()>0){
            typeid = $("[name='type']").val();
        }else{
            typeid = 0;
        }
        $("#blogs-container").load("/blogsSearch",{
            "title":$("[name='title']").val(),
            "typeid":typeid,
            "num":pageNum,
        });
    };

    function deleteBlog(id,out_pageNum){
        $('.ui.delete.tiny.modal')
            .modal({
                onApprove:function (){
                    $.ajax({
                        url:'deleteBlog',
                        data:{
                            "id":id,
                        },
                        type:'post',
                        success:function (){
                            window.location.href="/toBlogs?pageNum="+out_pageNum;
                        }
                    });
                }
            })
            .modal('show');
    };


</script>
</body>
</html>